<template>
	<view class="container">
		<!-- 内容区域包装器 -->
		<view class="content-wrapper" style="background-color: #ffffff;">
			<!-- 搜索区域 -->
			<view class="search-box">
				<u-search placeholder="搜索"  v-model="fromData.kw" :show-action="false" :clearabled="true" :animation="false"
					shape="round" bgColor="#eeeeee" height="72rpx" searchIconColor="#999999" placeholderColor="#333333" @change="changekeword"
					:inputStyle="{
						color: '#333333',
						backgroundColor: '#eeeeee',
					}"></u-search>
			</view>
			<!-- <view class="sort-box">
				
				<view class="sort-item"  @click="changeSort('room_name')">
					<span>房号</span>
					<img class="sort-icon" src="@/static/sort_asc.png" alt="" v-if="select.room_name == 'asc'"/>
					<img class="sort-icon" src="@/static/sort_desc.png" alt="" v-else />
				</view>
				<view class="sort-item" @click="changeSort('day')">
					<span>账期</span>
					<img class="sort-icon" src="@/static/sort_asc.png" alt="" v-if="select.day == 'asc'"/>
					<img class="sort-icon" src="@/static/sort_desc.png" alt="" v-else />
				</view>
				<view class="sort-item" @click="changeSort('money')">
					<span>金额</span>
					<img class="sort-icon" src="@/static/sort_asc.png" alt="" v-if="select.money == 'asc'"/>
					<img class="sort-icon" src="@/static/sort_desc.png" alt="" v-else />
				</view>
			</view> -->
			
		</view>
		<!-- 收租账单 -->
		<view class="content-box">
			<!-- tab切换 -->
			<view class="">
				共{{list.length}}条 收入 支出
			</view>
			<!-- <u-tabs :list="tabArr" :current="current" :scrollable="false" @change="change" lineWidth="20"
				lineColor="#f56c6c" :activeStyle="{
					color: '#000',
					fontWeight: 'bold',
					transform: 'scale(1.05)'
				}" lineHeight="7"></u-tabs> -->
			<!-- 列表 -->
			<view class="record" v-for="item in list" @click="jump('/pages-landlord/house/billNew?id='+item.id)">
				
				<view class="flex">
					<view class="flex-left">
						<view class="t0">
							{{item.room_name}}
						</view>
						<view class="t1">
							{{item.build_address}}
						</view>
						<view class="t2">
							{{item.user_name}}{{item.user_phone}}
						</view>
						<view class="t3">
							{{item.remark}}
						</view>
						<view class="t4 font-color-red" v-if="item.overdue_day>0">
							已逾期{{item.overdue_day}}天
						</view>
					</view>
					<view class="flex-right">
						<view class="r0 font-color-red">
							{{item.money}}元
						</view>
						<view class="r1">
							{{item.day}}
						</view>
						<view class="r2">
							<!-- 0-待审核 1-待支付 2-已支付 -->
							{{item.status===0?'待审核':item.status===1?'待支付':item.status===2?'已支付':''}}
						</view>
					</view>
				</view>
				<!-- <view class="bottom">
					<template v-if="current===1">
						<view class="btn" @click="audit(item.id)">审核</view>
						<view class="btn"  @click="del(item.id)">删除</view>
					</template>
				    <template v-if="current===2">
						<view class="btn"  @click="sms(item.id)">短信</view>
						<view class="btn" @click="call(item.user_phone)">拨号</view>
						<view class="btn" @click="receive_payment(item.id)">收款</view>
					</template>
					<template v-if="current===3">
					   <view class="btn" @click="revoke(item.id)">撤回</view>
					</template>
					
				</view> -->
			</view>
		</view>
	</view>
</template>

<script>

import {history_bill } from '@/api/landlord.js'
export default {
	data() {
		return {
			list: [],
			current:0,
			tabArr:[{
				id:0,name:'全部'
			},{
				id:1,name:'待审'
			},{
				id:2,name:'待收'
			},{
				id:3,name:"已收"
			}],
			select:{
				room_name:'asc',
				day:'asc',
				money:'asc'
			},
			fromData: {
				page: 1,
				page_size: 10,
				kw:'',
				room_id:''
			},
			total:0
		};
	},
	onLoad(options) {
		// this.getNum()
		this.fromData.kw=options.kw
		this.init()
		console.log(8888);
	},
	async onReachBottom() {
		if(this.list.length < this.total) {
			this.formData.page++
			this.init()
		}
	},
	methods: {
		changekeword(){
			this.list = []
			this.fromData.page = 1
			this.init()
		},
		//切换
		change(e) {
			console.log(e);
			this.list = []
			this.fromData.page = 1
			this.current=e.index
			this.fromData.status = e.index===0?'':Number(e.index-1)
			console.log("current",this.current,this.fromData.status)
			this.init()
		},
		changeSort(sort) {
			console.log("sort",sort)
			this.select[sort] = this.select[sort] == 'asc' ? 'desc' : 'asc'
			this.formData.way=this.select[sort]
			this.formData.sort=sort
			this.formData.page = 1
			this.list = []
			this.init()
		},
		getNum(){
			index_statBill().then(res=>{
				console.log(res.data.data);
				let data=res.data.data
			    this.tabArr[0].name=`全部(${data.all})`
				this.tabArr[1].name=`待审(${data.dai_shen})`
				this.tabArr[2].name=`代收(${data.dai_shou})`
				this.tabArr[3].name=`已收(${data.yi_shou})`
			})
		},
		init() {
			history_bill(this.fromData).then(res => {
				console.log("账单列表",res.data.data.data);
				res.data.data.data.forEach((item) => {
					this.list.push(item)
				})
				this.total = res.data.data.total
			})
		},
		// 路由跳转
		jump(item) {
			uni.navigateTo({
				url: item
			});
		},
		//审核
		audit(ids){
		   billAudit({ids:ids}).then(res => {
		   })
		},
		del(ids){
		   billDel({ids:ids}).then(res => {
		   })
		},
		sms(id){
	    	billSms({ids:ids}).then(res => {
		   })
		},
		call(phone){
			uni.makePhoneCall({
				phoneNumber: phone,
				success: function () {
				console.log('拨打电话成功！');
				},
				fail: function (err) {
				console.error('拨打电话失败：', err);
				}
			});
		},
		receive_payment(ids){
		   receive_payment({ids:ids}).then(res => {
		   })
		},
		revoke(ids){
		   billRevoke({ids:ids}).then(res => {
		   })
		}
	},
	onReady() {
		// 微信小程序需要用此写法
	},
};
</script>

<style lang="less" scoped>
.container {
	min-height: 100vh;
	background-color: #f5f6fa;
}

.search-box {
	padding: 24rpx 32rpx;

	:deep(.u-search) {
		background-color: #ffffff !important;
		border-radius: 36rpx;
		box-shadow: 0 0 10rpx rgba(0, 0, 0, 0.05);

		.u-search__content {
			background-color: #ffffff !important;
			height: 72rpx;
			padding: 0 30rpx;

			.u-search__content__icon {
				margin-right: 8rpx;
			}

			.u-search__content__input {
				font-size: 28rpx;
			}
		}
	}
}
.sort-box {
	padding: 0 32rpx 32rpx;
	display: flex;
	gap: 26rpx;
	background-color: #fff;
	.add-btn {
		padding: 20rpx;
	}
	.sort-item {
		flex: 1;
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 18rpx 24rpx;
		background: #F5F6FA;
		border-radius: 12rpx;
		font-weight: 500;
		font-size: 26rpx;
		color: #202020;
		line-height: 36rpx;
		.sort-icon {
			width: 12rpx;
			height: 24rpx;
		}
	}
}
.font-color-red{
	color: red;
}
.record {
	// width: 100%;
	box-sizing: border-box;
	padding: 15rpx;
	border-radius: 20rpx;
	background-color: #fff;
	font-size:26rpx;
	margin:32rpx;
	.flex {
		display: flex;
		// align-items: center;
		justify-content: space-between;
		margin: 20rpx 0;
		.flex-left{
			.t0{}
			.t1{}
			.t2{}
			.t3{}
			.t4{}
		}
		.flex-right{
			text-align: right;
			.r0{}
			.r1{}
			.r2{}
		}
		
	}
    .bottom{
    	display: flex;
		justify-content: flex-end;
		.btn{
			border: 1px solid #999999;
			border-radius: 28rpx;
			margin-left: 16rpx;
			padding: 0 20rpx;
			
		}
    }
}





</style>